<template>
  <!--- 维护事项详情 -->
  <view>
    <view class="container" :class="{ 'form-content': btnName === 'CONFIRM' }">
      <uni-forms ref="form" :modelValue="formData" :rules="rules" labelWidth="120px" labelPosition="top">
        <view class="container">
          <view class="hidden-title">基本信息</view>
          <view class="background-white">
            <view class="flex text"
              >任务名称：
              <text>{{ detail.taskName }}</text>
            </view>
            <view class="flex text"
              >任务编号：
              <text>{{ detail.taskNumber }}</text>
            </view>
            <view class="flex text"
              >设备分组：
              <text>{{ detail.deviceGroupLabel }}</text>
            </view>
            <view class="flex text"
              >设备类型：
              <text>{{ detail.deviceTypeLabel }}</text>
            </view>
            <view class="flex text"
              >设备级别：
              <text>{{ detail.deviceLevelLabel }}</text>
            </view>
            <view class="flex text"
              >维护保养设备：
              <text>{{ detail.deviceName }}</text>
            </view>
            <view class="flex text"
              >维护保养部门：
              <text>{{ detail.deptLabel }}</text>
            </view>
            <view class="flex text"
              >所属场所：
              <text>{{ detail.areaLabel }}</text>
            </view>
            <view class="flex text"
              >维护保养牵头人：
              <text>{{ detail.userIdsLabel }}</text>
            </view>
            <view class="flex text"
              >技术员：
              <text>{{ detail.technicianLabel }}</text>
            </view>
            <view class="flex text"
              >维护保养开始时间：
              <text>{{ detail.startTime }}</text>
            </view>
            <view class="flex text"
              >维护保养截止时间：
              <text>{{ detail.endTime }}</text>
            </view>
            <view class="flex text"
              >任务完成方式：
              <text>{{ detail.completionModeLabel }}</text>
            </view>
          </view>
        </view>
        <view class="maintenance-step" v-if="detail.taskItemRespList.length > 0">
          <view class="hidden-title">维护保养</view>
          <view class="">
            <view class="step-block" v-for="(d, di) in detail.taskItemRespList" :key="di">
              <view class="step">
                <!--<view :class="['step-no', `color-${timeStatus}`]">{{ di + 1 }}</view>-->
                <view class="step-no">
                  <image class="icon-style" :src="getImage(d)" mode="aspectFill" />
                </view>
                <view class="stepLine" v-show="!(di === detail.taskItemRespList.length - 1)"></view>
              </view>
              <view class="step-content background-white">
                <view style="padding: 5px">
                  <text style="text-indent: 5px; color: #999">维护保养项目：</text>
                  <text style="color: #333">{{ d.item }}</text>
                </view>
                <view class="footer-wrap">
                  <view class="content-wrap"> </view>
                  <view class="button-wrap">
                    <button
                      v-if="['READ', 'CONFIRM'].includes(btnName) || d.completionTime !== null"
                      class="button"
                      @click="viewItem(d)"
                    >
                      查看
                    </button>
                    <button v-else class="button button-orange" @click="maintenance(d)">处理</button>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </uni-forms>
    </view>
    <view v-if="btnName === 'CONFIRM'">
      <view class="confirm-form">
        <uni-forms ref="form" :modelValue="formData" :rules="rules" labelWidth="120px" labelPosition="top">
          <uni-forms-item name="confirmRecord" label="事项记录">
            <textarea
              v-model="formData.confirmRecord"
              class="text-area"
              placeholder="对隐患产生的原因做简要的分析(限1000字)"
              :disabled="readOnly"
              maxlength="1000"
            />
          </uni-forms-item>
        </uni-forms>
        <view class="submit-group">
          <button class="u-button" :ripple="true" @click="submit">确定</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { confirmDetail, executeDetail, maintenanceConfirm } from '../../../../api/equipment/maintenance'

export default {
  data() {
    return {
      btnName: '',
      tabType: '',
      taskId: '',
      readOnly: false,
      formData: {
        id: '',
        confirmRecord: ''
      },
      detail: {
        taskName: '',
        deviceGroupLabel: '',
        deviceId: '',
        areaLabel: '',
        content: '',
        standard: '',
        taskItemRespList: []
      },
      details: {},
      // 当前时间: 1<开始时间 2[开始时间,截止时间) 3>=截止时间
      timeStatus: 0,
      rules: {
        confirmRecord: {
          rules: [
            {
              required: true,
              errorMessage: '事项记录不能为空'
            }
          ]
        }
      }
    }
  },
  onLoad({ taskId, readOnly, operate, type }) {
    this.btnName = operate
    this.tabType = type
    this.readOnly = readOnly
    this.formData.id = this.taskId = taskId
    this.getDetail()
  },
  onPullDownRefresh() {
    this.getDetail()
  },
  onShow() {
    this.getDetail()
  },
  methods: {
    async getDetail() {
      let reqType = null
      if (this.btnName === 'READ') reqType = 0
      else if (this.btnName === 'EXECUTE') reqType = 1

      let data
      if (this.tabType === '0') {
        data = await executeDetail(this.taskId, reqType)
      } else if (this.tabType === '1') {
        data = await confirmDetail(this.taskId)
      }
      Object.assign(this.detail, data.data)

      const { startTime, endTime } = this.detail
      if (!startTime || !endTime) return
      const current = new Date().getTime(),
        start = new Date(startTime).getTime(),
        end = new Date(endTime).getTime()
      if (current < start) this.timeStatus = 1
      else if (current >= end) this.timeStatus = 3
      else this.timeStatus = 2
    },

    getImage(item) {
      switch (item.completionStatus) {
        case '1':
          return '/static/images/notOverdueComplete.png'
        case '4':
          return '/static/images/overdueComplete.png'
        case '3':
          return '/static/images/overdueNotComplete.png'
        case '0':
          return '/static/images/notOverdueNotComplete.png'
        default:
          return '/static/images/notOverdueComplete.png'
      }
    },

    viewItem(item) {
      let url = '/pages/work/intelligentPatrolInspection/maintenanceMatter/itemDetail?taskId=' + item.id
      url += `&info=${JSON.stringify(item)}`
      url += `&tabType=${this.tabType}`
      uni.navigateTo({
        url
      })
    },
    maintenance(item) {
      let url = '/pages/work/intelligentPatrolInspection/maintenanceMatter/maintenance?taskId=' + item.id
      url += `&location=${this.detail.areaLabel}`
      url += `&info=${JSON.stringify(item)}`
      url += `&deviceId=${this.detail.deviceId}`
      url += `&deviceName=${this.detail.deviceName}`
      url += `&areaId=${this.detail.areaId}`
      uni.navigateTo({
        url
      })
    },

    submit() {
      this.$refs.form.validate().then(async (res) => {
        if (res) {
          await maintenanceConfirm(this.formData)
          this.$modal.msgSuccess('保存成功')
          this.navigateBack()
        }
      })
    },
    navigateBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss">
.container {
  width: 96%;
  margin: 10px auto;

  .background-white {
    background-color: #fff;
    padding: 5px 10px;
    box-sizing: border-box;
    border-radius: 10px;

    .uni-forms-item__label {
      color: #333;
      font-size: 30rpx;
    }

    .text {
      margin: 10px 0;
      color: #999;

      text {
        color: #333;
      }
    }
  }
}

.hidden-title {
  background: #f5f5f5;
  padding: 5px 0;
  color: #999;
}

.bor-top {
  padding-top: 10px;
  border-top: 1px solid #d5d7e3;
  justify-content: flex-end;
}

.form-content {
  margin-bottom: 300px;
}

.maintenance-step {
  width: 96%;
  margin: 0 auto;

  .step-block {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
  }

  .step {
    width: 10%;
    text-align: center;

    .step-no {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      text-align: center;
      line-height: 24px;
    }

    .color-1 {
      background-color: #999;
    }

    .color-2 {
      background-color: #95ee9a;
    }

    .color-3 {
      background-color: orange;
    }

    .stepLine {
      width: 2px;
      background-color: rgb(208, 208, 208);
      flex: 1;
      display: inline-flex;
      margin-left: -7px;
      height: 80%;
    }

    .icon-style {
      width: 46rpx;
      height: 46rpx;
    }
  }

  .step-content {
    width: 89%;
    border-radius: 10px;
  }

  .btn-box {
    display: flex;
    justify-content: flex-end;
    padding: 0 10px;
  }

  .operate-btn {
    text-align: center;
    margin: 5px 0 0;
    font-size: 15px;
    border: 0.5px solid #454a5e;
    border-radius: 17px;
    color: #454a5e;
    background-color: #ffffff;
    padding: 5px 22px;
  }

  .deal-btn {
    background-color: #3a78fc;
    color: #fff;
  }
}

.confirm-form {
  .uni-forms {
    height: 260px;
  }

  position: fixed;
  bottom: var(--window-bottom);
  width: 100%;
  background: #fff;
  padding: 10px 16px;
}
</style>
